<!--
 * @Description: rtsp_ffmpeg_node_websoket_flv   此方案需启动node服务,server
 * @Author: xuzp4
 * @Date: 2021-11-17 10:25:01
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-09-23 10:51:58
 * @FilePath: \vue_demo\src\view\video3\rtsp2hls.vue
-->
<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>
<script>
import videojs from "video.js";
export default {
  data() {
    return {
      rtsp: "rtsp://admin:Sany1234@10.11.193.80/cam/realmonitor",
      channel: 1,
      subtype: 0,
      player: null,
      id: "1",
      videoOptions: {
        autoplay: true,
        controls: true,
        sources: [
          // hls视频流
          {
            src: "http://220.161.87.62:8800/hls/0/index.m3u8",
            type: "application/x-mpegURL",
          },
        ],
      },
    };
  },
  mounted() {
    this.player = videojs(
      this.$refs.videoPlayer,
      {
        autoplay: true,
        controls: true,
        sources: [
          // hls视频流
          {
            src: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}&channel=${this.channel}&subtype=${this.subtype}`,
            type: "application/x-mpegURL",
          },
        ],
      },
      function onPlayerReady() {
        console.log("onPlayerReady", this);
      }
    );
  },
  beforeDestroy() {
    this.player.dispose();
  },
};
</script>
<style>
.demo-video {
  max-width: 880px;
  max-height: 660px;
}
</style>